<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>订票</title>
    <link
            href="./css/bootstrap.min.css"
            rel="stylesheet">
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/jquery.form.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link
            href="./css/layui.css"
            rel="stylesheet">
</head>
<body>
<div style="text-align: center;">
    <div class="layui-inline">
        <table
                style="margin: auto;"
                class="layui-hide"
                id="ticketInformation">
        </table>
    </div>
</div>
<script
        type="text/html"
        id="ticketInformation-bar">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="order">订票</a>
    </div>
</script>
<script src="./js/layer/layui.js"></script>
<script>
    layui
        .use(
            'table',
            function () {
                var table = layui.table;

                // 创建渲染实例
                table
                    .render({
                        width: 980,
                        elem: '#ticketInformation',
                        url: encodeURI('/litangtravel/selectTicket'),
                        page: {
                            layout: ['limit', 'count',
                                'prev', 'page', 'next',
                                'skip'], //自定义分页布局
                            groups: 1,
                            first: false,
                            last: false
                        },
                        pagebar: '#ticketInformation-pagebar', // 分页栏模板
                        cols: [[{
                            field: 'ocity',
                            align: 'center',
                            width: 160,
                            title: '出发地'
                        }, {
                            field: 'dcity',
                            align: 'center',
                            width: 160,
                            title: '目的地',
                            sort: true,
                        }, {
                            field: 'start_time',
                            align: 'center',
                            width: 160,
                            title: '发车时间',
                        }, {
                            field: 'end_time',
                            align: 'center',
                            title: '到达时间',
                            width: 160,
                        }, {
                            Width: 160,
                            title: '操作',
                            toolbar: "#ticketInformation-bar",
                            align: 'center',
                        }]]
                    });
                table
                    .on(
                        'tool(ticketInformation)',
                        function (obj) {
                            var eventValue = obj.event;
                            var data = obj.data;
                            if (eventValue === 'order') {
                                layer
                                    .confirm(
                                        '真的要订票 : '
                                        + '[' + data.ocity + ']' + '——' + '[' + data.dcity + ']'
                                        + '么',
                                        function (
                                            index) {
                                            $
                                                .ajax({
                                                    url: encodeURI("/litangtravel/orderTicket"),
                                                    type: "post",
                                                    data: {
                                                        id: data.id
                                                    },
                                                    dataType: "json",
                                                    success: function (
                                                        data) {
                                                        if (data) {
                                                            layer
                                                                .msg(data.msg);
                                                            layer
                                                                .close(index);
                                                        } else {
                                                            layer
                                                                .msg("订票出错");
                                                        }
                                                    }
                                                });
                                        });
                            }
                        });
            });
</script>

</body>
</html>